<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--
    Promise 语法上是构造函数,  解决回调地狱
    理解: 用于封装异步操作
    怎么用:
    1. 创建promise
        const p = new Promise((resolve, reject) => {
          一般封装一些异步代码
          resolve(1) 用于将promise的状态从pending 改成 fulfilled
          reject()  用于将promise的状态从pending 改成 rejected
        })
    2. 使用promise
        p.then((res) => {}).catch(() => {})

    Promise.all([p1, p2, p3])     整个promise的结果会等所有promise都成功后 才成功
    Promise.race([p1, p2, p3])    整个promise的结果只要有一个成功 就成功了
    Promise.resolve(1)            快速得到一个成功的promise
    Promise.resject(1)            快速得到一个失败的promise
   -->

   <script>
    // 需求1: 开一个延时器  2秒后 打印 我是zs  => 封装成一个函数
    // 需求2: 开一个延时器  2秒后 打印 我是zs  /  alert 你好  => 封装成一个函数
    // 需求3: 调用fn函数 2秒后打印我是zs 再等2秒后 打印我是ls
    // function fn() {
    //   setTimeout(() => {
    //     console.log('我是zs')
    //   }, 2000)
    // }

    // fn()

    // function fn(callback) {
    //   setTimeout(() => {
    //     callback()
    //   }, 2000)
    // }

    function fn() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, 2000)
      })
    }

    // fn().then(() => {
    //   console.log('我是zs')
    //   return fn()
    // }).then(() => {
    //   // 这里的成功函数 将来等的是 上一次成功函数的返回值 => 链式调用
    //   console.log('我是ls')
    //   return fn()
    // }).then(() => {
    //   console.log('我是ww')
    //   // return fn()
    // })

    // async await 语法糖 写代码的角度去看    异步的代码 写成 "同步的感觉"
    async function test() {
      await fn()
      console.log('我是zs')

      await fn()
      console.log('我是ls')

      await fn()
      console.log('我是ww')
    }

    test()

    // 总结:
    // 如果将来你想等一个异步操作结束之后 做某件事:
    // 1. 将你要做的事 通过回调函数传入进去 => 回调地狱
    // 2. 将你的异步操作给我封装到一个promise中去,
    //      p.then(() => {})
    //      async  await

    // fn(function() {
    //   console.log('我是zs')
    // })
    // fn(() => {
    //   alert('你好')
    // })

    // fn(() => {
    //   console.log('我是zs')
    // })
    // fn(() => {
    //   console.log('我是ls')
    // })

    // fn(() => {
    //   console.log('我是zs')

    //   fn(() => {
    //     console.log('我是ls')

    //     fn(() => {
    //       console.log('我是ww')

    //       fn(() => {
    //         console.log('我是tq')
    //       })
    //     })
    //   })
    // })

   </script>
</body>
</html>
